<template>
  <div>
    <div style="margin-bottom: 20px">
      <!-- 查找 -->
      <el-space wrap>
        <!-- 请输入商品名称 -->
        <el-input class="spuName" placeholder="请输入商品名称" v-model="spuName" />
        <!-- 请输入团购ID -->
        <el-input v-model="id" placeholder="请输入团购ID" />
        <!-- 请选择团购状态 -->
        <el-select v-model="status" placeholder="请选择团购状态">
          <el-option
            v-for="item in optionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" @click="onSearch">
          <span class="iconfont icon-sousuo"></span>查找
        </el-button>
        <el-button type="primary" @click="addData">
          <span class="iconfont icon-tianjia"></span>添加
        </el-button>
      </el-space>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 展开行的表格 -->
      <el-table-column type="expand" prop="categoryId">
        <template #default="props">
          <div style="padding:10px 20px 20px 30px">
            <!-- 展开行处理数据的事件==方法 -->
            {{expand( props.row.categoryId)}}
            <span style="margin-right:50px">类目ID</span>
            <span>{{ props.row.categoryId }}</span>
            <p>商品sku属性</p>
            <el-table :data="drawerList" border style="width: 100%">
              <el-table-column prop="skuId" label="skuId" width="180" align="center" />
              <el-table-column prop="title" label="规格标题" width="180" align="center" />
              <el-table-column prop="skuGroupShopPrice" label="团购价格（元）" align="center" />
              <el-table-column prop="stock" label="库存" align="center" />
              <el-table-column prop="originalPrice" label="原始价格（元）" align="center" />
              <el-table-column prop="price" label="售卖价格（元）" align="center" />
              <el-table-column prop="vipPrice" label="会员价格（元）" align="center" />
              <el-table-column prop="barCode" label="国际条码" align="center" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团购ID" prop="id" align="center" />
      <el-table-column label="商品ID" prop="spuId" align="center" />
      <el-table-column label="商品名称" prop="title" align="center" />
      <el-table-column prop="img" label="商品主图" align="center">
        <template #default="scope">
          <el-popover
            :width="300"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <img style=" width: 50px; height: 35px;" :src="scope.row.img? scope.row.img:''" />
            </template>
            <template #default>
              <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
              >
                <img :src="scope.row.img? scope.row.img:''" />
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="未满策略" prop="sales">
        <template #default="scope">
          <el-tag :type="scope.row.sales==0?'warning':''">{{scope.row.sales==0? '发货':'未发货'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" prop="status">
        <template #default="scope">
          <el-tag :type="scope.row.status==1?'success':''">{{scope.row.status==0? '冻结':'进行'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="gmtStart">
        <template
          #default="scope"
        >{{ scope.row.gmtStart? new Date().formate(scope.row.gmtStart):"无"}}</template>
      </el-table-column>
      <el-table-column label="结束时间" prop="gmtEnd">
        <template #default="scope">{{ scope.row.gmtEnd? new Date().formate(scope.row.gmtEnd):"无"}}</template>
      </el-table-column>
      <el-table-column label="当前人数" prop="buyerNum" />
      <el-table-column label="目标人数" prop="minNum" />
      <el-table-column prop label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" direction="ltr" size="80%">
      <template #title>
        <!-- <h4>创建团购商品</h4> -->
        <span>{{drawerTitle}}</span>
      </template>
      <template #default>
        <!-- 商品属性spu -->
        <div class="shopSpu" alignment="flex-start">
          <span>商品属性(spu)</span>
          <el-form ref="ruleFormRef" :model="form" class="formSpu">
            <el-form-item label="团购商品">
              <el-cascader
                v-model="form.spuId"
                :options="productOptions"
                placeholder="团购商品"
                :props="props"
                show-all-levels
                @change="groupChangeShop"
                clearable
              />
            </el-form-item>
            <el-form-item label="团购时间">
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-model="form.gmtStart "
                  type="datetime"
                  placeholder="选择日期"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="x"
                />至
                <!-- value-format="x" 转换成时间戳 -->
                <el-date-picker
                  v-model="form.gmtEnd "
                  type="datetime"
                  placeholder="选择日期"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="x"
                />
              </el-config-provider>
            </el-form-item>
            <el-form-item label="团购基础人数">
              <el-input-number v-model="form.minNum " :min="20" controls-position="right" />
            </el-form-item>
            <el-form-item label="活动结束时人数没有达到基础人数采取:">
              <el-radio-group v-model="form.automaticRefund ">
                <el-radio-button label="0">不退款,我要发货</el-radio-button>
                <el-radio-button label="1">自动退款,我不发货</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <!-- 商品类型sku -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>商品类型</span>

              <div style="float:right">
                <el-popover placement="right" :width="400" v-model:visible="visible">
                  <template #reference>
                    <el-button style="margin-right: 16px" @click="visible = true">批量定价</el-button>
                  </template>

                  <el-form status-icon label-width="120px" class="demo-ruleForm">
                    <el-form-item label="团购价格" prop="skuGroupShopPrice">
                      <el-input-number
                        v-model="skuGroupShopPrice "
                        :min="0"
                        controls-position="right"
                      />元
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitFormSkuPrice()">确定</el-button>
                      <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-popover>
              </div>
            </div>
          </template>

          <div>
            <!-- 商品类型sku表格 -->
            <el-table :data="form.groupShopSkuList" stripe style="width: 100%">
              <el-table-column prop="spuId" label="SkuId" width="180" />
              <el-table-column prop="barCode" label="Sku条形码" width="180" />
              <el-table-column prop="title" label="类型名" />
              <el-table-column prop="stock" label="库存" />
              <el-table-column prop="originalPrice" label="现价/元" />
              <el-table-column prop="skuGroupShopPrice" label="团购价格/元" />
              <el-table-column prop label="操作" align="center">
                <template #default="scope">
                  <el-button size="small" type="primary" @click="handleUpdata(scope.row)">更新</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--更新团购价格的===== 弹框 -->
            <el-dialog v-model="dialogFormVisibleUpdata" title="更新团购价格">
              <el-form :model="formData" label-position="left" label-width="auto" status-icon>
                <el-form-item prop label="团购价格">
                  <el-input-number
                    v-model="formData.skuGroupShopPrice"
                    :min="0"
                    controls-position="right"
                  />元
                </el-form-item>
                <el-form-item prop="originalPrice" label="现价">{{formData.originalPrice}}元</el-form-item>
                <el-form-item prop="title" label="sku类型名">{{formData.title}}</el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="Cancel">取消</el-button>
                  <el-button type="primary" @click="onSubmit()">确定</el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </el-card>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="createClick('ruleFormRef')">创建</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- //分页 -->
    <daily-demo v-bind="demo" @pages="pages" @limits="limits"></daily-demo>
  </div>
</template>

<script>
import http from "@/util/http";
import DailyDemo from "@/components/DailyOperation/Demo.vue";
// 国际化中文配置的引入
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
export default {
  components: {
    DailyDemo,
    ElConfigProvider, //国际化中文
  },
  data() {
    return {
      locale: zhCn, //国际化中文
      // 抽屉的标题
      drawerTitle: "",
      // 展开行的数据
      drawerList: [],
      // 抽屉的布尔值
      drawer: false,
      // 抽屉的数据
      form: {
        spuId: "",
        gmtStart: "", //团购开始时间戳
        gmtEnd: "", //团购结束时间戳
        minNum: "", //团购最低人数
        automaticRefund: 0, //团购人数未满是否自动退款
        groupShopSkuList: [], //团购sku链表--- // 抽屉的商品类型表格数据
      },
      formData: {
        skuGroupShopPrice: "", //团购价格
        originalPrice: "", //现价
        title: "", //sku类形名
      },
      // 团购基础人数
      minNum: 1,
      // 当前人数与目标人数
      num: 1,
      // 团购价格
      skuGroupShopPrice: 0,
      // 更新团购价格的弹框的布尔值
      dialogFormVisibleUpdata: false,
      // 批量定价的弹出框的布尔值
      visible: false,
      // 抽屉的商品树
      productOptions: [],
      // 商品获取SPU树配置选项
      props: {
        checkStrictly: true,
        label: "label",
        value: "id",
        children: "children",
        emitPath: false,
      },
      // 渲染数据
      tableData: [],
      // 分页数据
      demo: {
        page: 1,
        limit: 10,
        total: 1, //分页--总条数
      },

      //编辑的id
      editId: "",
      //----------- 查询的信息-------------
      spuName: "", //查询--团购商品的名称
      id: "", //查询--团购商品的ID
      status: "", //查询--团购商品的状态
      // 状态选择
      optionStatus: [
        { label: "冻结", value: 0 },
        { label: "活动", value: 1 },
      ],
    };
  },
  // 计算属性
  computed: {
    // upgroupdata() {
    //   return {
    //     _gp: "admin.groupshop",
    //     _mt: "list",
    //     id: this.id, //团购商品的ID
    //     spuName: this.spuName, //团购商品的名称
    //     status: this.status, //团购商品的状态
    //     page: this.demo.page, //团购商品页码
    //     limit: this.demo.limit, //团购商品长度
    //     skuGroupShopPrice: this.skuGroupShopPrice, //团购价格
    //   };
    // },
  },
  created() {
    this.groupList(); //渲染数据
    this.treeList(); // 类目树请求--与--   //商品获取SPU树
  },
  watch: {
    // ''()
  },
  methods: {
    // 抽屉里面的小弹框的取消
    Cancel() {
      ElMessage.info("取消价格调整");
      this.dialogFormVisibleUpdata = false;
    },
    // 表格--编辑
    handleEdit(row) {
      this.editId = row.id;
      Object.assign(this.form, row);
      this.groupChangeShop(row.spuId); //再调用抽屉商品类型表格的数据请求
      this.drawerTitle = "编辑团购商品";
      this.drawer = true;
    },
    //表格--- 删除
    handleDelete(row, index) {
      console.log(row, index, "删除");
    },
    // 点击更新的弹框里面的确定按钮
    onSubmit() {
      let up = this.form.groupShopSkuList.find(
        (items) => items.id == this.formData.id
      ); //此时它是一个新的对象等待新的赋值
      up.skuGroupShopPrice = this.formData.skuGroupShopPrice; //给新的对象赋值一个新的团购价格

      this.dialogFormVisibleUpdata = false;
    },
    // 更新
    handleUpdata(row) {
      Object.assign(this.formData, row);
      this.dialogFormVisibleUpdata = true;
    },
    // 批量定价---团购价格的取消按钮
    resetForm() {
      ElMessage.info("取消批量定价的调整");
      this.visible = false;
    },
    // 批量定价---团购价格的确定按钮
    submitFormSkuPrice() {
      this.form.groupShopSkuList.forEach((items) => {
        items.skuGroupShopPrice = this.skuGroupShopPrice;
      });
      this.visible = false;
      this.groupList();
    },
    // 抽屉的---取消
    cancelClick() {},
    // 抽屉的---创建
    createClick(ruleFormRef) {
      // 请求接口所需要的团购链表参数
      let changeGroupShopSkuList = this.form.groupShopSkuList.map((items) => {
        //团购链表
        return { skuId: items.id, skuGroupShopPrice: items.skuGroupShopPrice };
      });
      //表单验证
      if (!this.form.spuId) {
        ElMessage.warning("团购商品不能为空");
        return false;
      }
      if (!this.form.gmtStart || !this.form.gmtEnd) {
        ElMessage.warning("团购时间不能为空");
        return false;
      }
      if (this.form.gmtStart >= this.form.gmtEnd) {
        ElMessage.warning("团购时间不正确");
        return false;
      }
      for (const i of changeGroupShopSkuList) {
        if (!i.skuGroupShopPrice) {
          ElMessage.warning("团购价格不能为空");
          return false;
        }
      }
      if (this.drawerTitle == "创建团购商品") {
        // 团购sku链表转换格式
        let data = {
          _gp: "admin.groupshop",
          _mt: "create",
          ...this.form,
          groupShopSkuList: JSON.stringify(changeGroupShopSkuList),
          spuId: this.form.spuId,
        };
        http.post(data).then((res) => {
          if (200 == res.data.errno) {
            ElMessage.success("创建成功");
            this.drawer = false;
            this.groupList();
          } else {
            ElMessage.error(res.data.errmsg);
          }
        });
      } else {
        console.log("编辑团购商品");
        // 编辑团购商品
        let data = {
          _gp: "admin.groupshop",
          _mt: "edit",
          ...this.form,
          groupShopSkuList: JSON.stringify(changeGroupShopSkuList),
          id: this.editId,
        };
        http.post(data).then((res) => {
          if (200 == res.data.errno) {
            ElMessage.success("创建成功");
            this.drawer = false;
            this.groupList();
          } else {
            ElMessage.error(res.data.errmsg);
          }
        });
      }
    },
    // 添加
    addData() {
      Object.assign(this.form, {
        spuId: "",
        gmtStart: "",
        gmtEnd: "",
        minNum: "",
        automaticRefund: 0,
        groupShopSkuList: [],
      });

      this.drawerTitle = "创建团购商品";
      this.drawer = true;
    },
    // 抽屉的商品类型表格请求----- //@Change事件自带val值
    groupChangeShop(val) {
      let data = {
        _gp: "admin.product",
        _mt: "detail",
        spuId: val,
      };
      http.post(data).then((res) => {
        // 商品类型表格的数据
        this.form.groupShopSkuList = res.data.data.skuList;
        this.id = res.data.data.id;
      });
    },
    // 查看
    onSearch() {
      this.groupList();
    },
    // 团购渲染数据请求
    groupList() {
      let data = {
        _gp: "admin.groupshop",
        _mt: "list",
        id: this.id, //团购商品的ID
        spuName: this.spuName, //团购商品的名称
        status: this.status, //团购商品的状态
        page: this.demo.page, //团购商品页码
        limit: this.demo.limit, //团购商品长度
        skuGroupShopPrice: this.skuGroupShopPrice, //团购价格
      };
      http.get(data).then((res) => {
        console.log(res, "团购渲染数据请求");
        this.tableData = res.data.data.items;
        this.demo.total = res.data.data.total;
      });
    },
    // 表格行中的展开行数据处理
    expand(id) {
      this.drawerList = this.tableData.find(
        //用find查找，如果查找到类目id等于传过来id的话，那么它的团购sku链表就赋值给this.drawerList
        (items) => items.categoryId == id
      ).groupShopSkuDTOList;
    },
    // 类目树请求--与--   //商品获取SPU树
    treeList() {
      //商品获取SPU树
      let productData = {
        _gp: "admin.product",
        _mt: "getSpuBigTree",
      };
      http.post(productData).then((res) => {
        if (200 == res.data.errno) {
          this.productOptions = res.data.data;
        } else {
          ElMessage.error(res.data.errmsg);
        }
      });
    },
    //分页---当前页数
    pages(e) {
      console.log(e, 456);
      this.demo.page = e;
      this.groupList();
    },
    // 分页---每页显示条目个数
    limits(e) {
      this.demo.limit = e;
      this.groupList();
    },
  },
};
</script>

<style lang="less" scoped>
// 商品属性
.shopSpu {
  width: 100%;
  box-shadow: #cccccc60 1px 1px 8px 3px;
  padding: 20px;
  // 商品属性的form表单table表格阴影样式
  .formSpu {
    margin-left: 60px;
    margin-top: 15px;
  }
}
</style>
